<template>
  <div class="ycf">
    <div class="query">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="居民姓名:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-input v-model="formLabelAlign.name" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="证件号码:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-input v-model="formLabelAlign.name" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="档案状态:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            placeholder="请选择档案状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="户籍地址:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择户籍地址"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="现住址:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择现住址"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="档案状态:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择档案状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="常住状态:"
          style="display: inline-block; width: 33%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择常住状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          style="display: inline-block; width: 66%; padding-right: 20px;text-align: right;"
        >
        <el-button size="small" type="primary" icon="el-icon-search"
          >搜索</el-button
        >
        <el-button size="small" plain icon="el-icon-refresh-right"
          >重置</el-button
        >
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <p style="text-align: right">
        <el-button size="small" type="primary" @click="goto_charteDa">新建档案</el-button>
      </p>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 15px"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(222,234,255)',
        }"
        height="425"
      >
        <el-table-column prop="name" label="姓名" fixed="left"> </el-table-column>
        <el-table-column prop="six" label="性别"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="bordy" label="出生日期"> </el-table-column>
        <el-table-column prop="idcarde" label="证件号码" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="其他标识" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="曾用证件号" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="户籍地址" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="现地址" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="常住类型" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="档案状态" width="220"> </el-table-column>
        <el-table-column prop="jdDate" label="建档时间" width="220"> </el-table-column>
        <el-table-column prop="ys1" label="档案编号" width="220"> </el-table-column>
        <el-table-column prop="date" label="公卫人群" width="220">
          <template>
            <el-tag type="success" size="small">孕</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="居民标签" width="220">
          <template>
            <el-tag type="warning" size="small">一</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ys1" label="责任单位" width="220"> </el-table-column>
        <el-table-column prop="ys" label="责任医生" width="220"> </el-table-column>
        <el-table-column prop="date" label="签约状态">
          <template>
            <el-tag type="info" size="small">未签约</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ys1" label="居民来源" width="220"> </el-table-column>
        <el-table-column prop="date" label="操作" fixed="right" width="200">
          <template slot-scope="">
            <el-button
              type="primary"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(47, 160, 254)"
              @click="goto_userInfo"
              >档案详情</el-button
            >
            <el-button
              type="primary"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(47, 160, 254)"
              @click="goto_userInfo"
              >建册信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      tableData: [
        {
          name: "王洛勇",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张云龙",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "李文文",
          six: "女",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
        {
          name: "张雨生",
          six: "男",
          age: "46",
          bordy: "1988-10-11",
          idcarde: "532186358415661",
          jdDate: "2021-5-16",
          ys: "熊有庆",
          sc: "正常",
        },
      ],
    };
  },
  methods:{
    goto_charteDa(){
      this.$router.push('/carte_da')
      // window.open('/#/carte_da')
    },
    goto_userInfo() {
      this.$router.push('/user_info')
      // window.open("/#/user_info");
    },
  }
};
</script>
  
  <style scoped lang="scss">
.ycf {
  padding: 20px;
  background-color: #fff;
  .query {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
</style>